{% extends 'layout/manage.html' %}
{% block css %}
    <style>
        .project {
            margin-top: 10px;
        }

        .panel-body {
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .panel-body > .item {
            border-radius: 6px;
            width: 228px;
            border: 1px solid #dddddd;
            margin: 20px 10px;

        }

        .panel-body > .item:hover {
            border: 1px solid #f0ad4e;
        }

        .panel-body > .item > .title {
            height: 104px;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            font-size: 15px;
            text-decoration: none;
        }

        .panel-body > .item > .info {
            padding: 10px 10px;

            display: flex;
            justify-content: space-between;

            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            color: #8c8c8c;

        }

        .panel-body > .item > .info a {
            text-decoration: none;
        }

        .panel-body > .item > .info .fa-star {
            font-size: 18px;
        }

        .color-radio label {
            margin-left: 0;
            padding-left: 0;
        }

        .color-radio input[type="radio"] {
            display: none;
        }

        .color-radio input[type="radio"] + .cycle {
            display: inline-block;
            height: 25px;
            width: 25px;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }

        .color-radio input[type="radio"]:checked + .cycle {
            border: 2px solid black;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container-fluid project">

        <div class="panel panel-default">
            <div class="panel-heading"><i class="fa fa-star" aria-hidden="true"></i> 区块链</div>
            <div class="panel-body">
                {% for item in project_dict %}
                    <div class="item">
                        <a href="{% url 'order_blockinfo' %}?id={{ item.id }}" class="title"
                           style="background-color: #46b8da;">
                            <div><span>订单号：{{ item.order_id }}<br>
                                客户号：{{ item.customer_id }}<br>
                                产品名：{{ item.product_id }}</span></div>
                        </a>
                        <div class="info">
                            <div>

                            </div>
                            <div>
                                <i class="fa fa-user-o" aria-hidden="true"></i>
                                <span>{{ item.id }}</span>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>


    </div>


{% endblock %}